<template>
  <div id="app" class="app-container">

    <el-row>
<!--      <el-col :span="24" class="card-box">-->
<!--        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">-->
<!--        <el-form-item label="测试业务" prop="business">-->
<!--          <el-select v-model="queryParams.business" placeholder="请选择测试业务" clearable @change="businessChage">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.business_type"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" v-if="queryParams.business!=''">所有业务</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </el-col>-->

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>基本信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">总测试用例</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.allCases">{{ cache.allCases }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">已覆盖的用例</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.testCases">{{ cache.testCases }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">用例完成率</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.finshed">{{ cache.finshed }}%</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">用例执行次数</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.total">{{ cache.total }}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>用例完成率</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="caserate" style="height: 420px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>测试结果统计</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="caseresult" style="height: 420px" />
          </div>
        </el-card>
      </el-col>

<!--      <el-col :span="24" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header"><span>近30天线上缺陷统计</span></div>-->
<!--          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">-->
<!--            <div ref="defectstatistics" style="height: 420px" />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->

<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header"><span>按缺陷等级统计(上月)</span></div>-->
<!--          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">-->
<!--            <div ref="defectlevel" style="height: 420px" />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->

<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header"><span>按缺陷类型统计(上月)</span></div>-->
<!--          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">-->
<!--            <div ref="defecttype" style="height: 420px" />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCount } from '@/views/dashboard/workbench/api'

export default {
  name: 'Server',
  data () {
    return {
      // 统计命令信息
      caseresult: null,
      // 使用内存
      caserate: null,
      // 缺陷信息统计
      defectstatistics: null,
      // cache信息
      cache: [],
      queryParams: {
        business: ''
      }
    }
  },
  created () {
    this.getList()
    this.openLoading()
  },
  methods: {
    resetQuery () {
      this.queryParams.business = ''
      this.getList()
    },
    businessChage (value) {
      console.log('value' + this.queryParams.business)
      this.getList()
    },
    /** 查缓存询信息 */
    getList () {
      getCount(this.queryParams.business).then((response) => {
        this.cache = response.data

        var bugseries = []
        var projectname = []
        for (var prop in response.data.zworld_bug) {
          bugseries.push({
            name: prop,
            type: 'line',
            stack: null,
            data: response.data.zworld_bug[prop]
          })
          projectname.push(prop)
        }
        var levelbug = []
        for (var level in response.data.level_bug) {
          levelbug.push({
            name: level,
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: response.data.level_bug[level]
          })
        }
        var typebug = []
        for (var type in response.data.type_bug) {
          typebug.push({
            name: type,
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: response.data.type_bug[type]
          })
        }

        this.caseresult = echarts.init(this.$refs.caseresult, 'macarons')
        this.caseresult.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '测试详情',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: response.data.casecount
            }
          ]
        })
        this.caserate = echarts.init(this.$refs.caserate, 'macarons')
        this.caserate.setOption({
          tooltip: {
            formatter: '{b} <br/>{a} : ' + response.data.finshed
          },
          series: [
            {
              name: '峰值',
              type: 'gauge',
              min: 0,
              max: 100,
              detail: {
                formatter: response.data.finshed
              },
              data: [
                {
                  value: parseFloat(response.data.finshed),
                  name: '完成率'
                }
              ]
            }
          ]
        })
        this.defectstatistics = echarts.init(this.$refs.defectstatistics, 'macarons')
        this.defectstatistics.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: projectname
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: response.data.date_list
          },
          yAxis: {
            type: 'value'
          },
          series: bugseries
        })

        this.defectlevel = echarts.init(this.$refs.defectlevel, 'macarons')
        this.defectlevel.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: function (params) {
              let values = []
              let title = ''
              params.forEach(item => {
                title = item.axisValue
                values.push({
                  name: item.seriesName,
                  value: item.data,
                  color: item.color
                })
              })
              // 按照value进行降序排序
              values.sort((a, b) => b.value - a.value)
              // 仅显示前五个数据
              values = values.slice(0, 5)
              // 将值转化为字符串形式
              let result = `<div>${title}</div>`
              values.forEach(item => {
                var dot = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${item.color}"></span>`
                result += `<div >${dot} ${item.name}: ${item.value}</div>`
              })
              return result
            }
          },
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.value === 0) {
                return ''
              } else {
                return params.value
              }
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: projectname
          },
          series: levelbug
        })
        this.defecttype = echarts.init(this.$refs.defecttype, 'macarons')
        this.defecttype.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: function (params) {
              let values = []
              let title = ''
              params.forEach(item => {
                title = item.axisValue
                values.push({
                  name: item.seriesName,
                  value: item.data,
                  color: item.color
                })
              })
              // 按照value进行降序排序
              values.sort((a, b) => b.value - a.value)
              // 仅显示前五个数据
              values = values.slice(0, 5)
              // 将值转化为字符串形式
              let result = `<div>${title}</div>`
              values.forEach(item => {
                var dot = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${item.color}"></span>`
                result += `<div >${dot} ${item.name}: ${item.value}</div>`
              })
              return result
            }
          },
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.value === 0) {
                return ''
              } else {
                return params.value
              }
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: projectname
          },
          series: typebug
        })
      })
    },
    // 打开加载层
    openLoading () {
      // this.$modal.loading("正在统计后台数据，请稍候！");
    }
  }
}
</script>

<style>
    html,
    body,
    #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
